// data-set 可以按需引入，除此之外不要引入别的包
import React from 'react';
import {Fragment} from 'react';
import {G2, Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape, Facet, Util} from "bizcharts";
import axios from 'axios';
import DataSet from '@antv/data-set';
import {connect} from "react-redux";


// 下面的代码会被作为 cdn script 注入 注释勿删
// CDN START
var dataList = [
    // {date: "8-7", number: 1, marks: "总浏览量"},
    // {date: "8-8", number: 1, marks: "总浏览量"},
    // {date: "8-9", number: 1, marks: "总浏览量"},
    // {date: "8-10", number: 1, marks: "总浏览量"},
    // {date: "8-11", number: 1, marks: "总浏览量"},
    // {date: "8-12", number: 1, marks: "总浏览量"},
    // {date: "8-13", number: 1, marks: "总浏览量"},
    // {date: "8-14", number: 43, marks: "总浏览量"},
    // {date: "8-14", number: 2, marks: "实验总量"},
    // {date: "8-7", number: 0, marks: "实验总量"},
    // {date: "8-8", number: 0, marks: "实验总量"},
    // {date: "8-9", number: 0, marks: "实验总量"},
    // {date: "8-10", number: 0, marks: "实验总量"},
    // {date: "8-11", number: 0, marks: "实验总量"},
    // {date: "8-12", number: 0, marks: "实验总量"},
    // {date: "8-13", number: 0, marks: "实验总量"}
];
const ds = new DataSet();

function dealWithList(){
    var _tmpList = dataList;
    _tmpList.map((item, index) => {
        if(item.marks==="总浏览量"){
            var flag = 0;
            _tmpList.map((item_2, index_2) => {
                if(item.date === item_2.date && item_2.marks !== item.marks){
                    flag = 1;
                }
            });
            if(flag === 0){
                dataList.push({
                    date: item.date,
                    number: 0,
                    marks: '实验总量'
                })
            }
        }else{
            var flag = 0;
            _tmpList.map((item_2, index_2) => {
                if(item.date === item_2.date && item_2.marks !== item.marks){
                    flag = 1;
                }
            });
            if(flag === 0){
                dataList.push({
                    date: item.date,
                    number: 0,
                    marks: '总浏览量'
                })
            }
        }
    })
    console.log(dataList);
}

class Demo extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            dv: new DataSet().createView(),

        }
    }
    componentDidMount() {
        dataList = [];
        const _this = this;
        axios.defaults.withCredentials = false;
        axios.get('https://api.tju.ink/website/getaccessdetails?url=http://47.105.62.140/tjufe/')
            .then(function (response_1) {
                response_1.data.data.map((item, index) => {
                    dataList.push(item);
                });
                setTimeout(function () {
                    axios.get('https://api.tju.ink/website/getaccessdetails?url=http://47.105.62.140/tjufe/unity/')
                        .then(function (response_2) {
                            response_2.data.data.map((item,index) => {
                                dataList.push(item);
                            });
                            dealWithList();
                            _this.props.onSetDateList(dataList);
                        })
                }, 2000)
            })
    }
    // 生成一个View实例，作为类的属性，故不要在render方法里面生成这个实例
    render() {
        const ds = new DataSet();
        const dv = ds.createView().source(dataList);
        const cols = {
            date: {
                range: [0, 1]
            }
        };
        return (
            <Fragment>
                <Chart height={400} data={ dv } scale={cols} forceFit>
                    <Legend />
                    <Axis name="date" />
                    <Axis
                        name="number"
                        label={{
                            formatter: val => `${val}人`
                        }}
                    />
                    <Tooltip
                        crosshairs={{
                            type: "y"
                        }}
                    />
                    <Geom
                        type="line"
                        position="date*number"
                        size={2}
                        color={"marks"}
                        shape={"smooth"}
                    />
                    <Geom
                        type="point"
                        position="date*number"
                        size={4}
                        shape={"circle"}
                        color={"marks"}
                        style={{
                            stroke: "#fff",
                            lineWidth: 1
                        }}
                    />
                </Chart>
            </Fragment>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        dateList: state.chart.dateList,
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
        onSetDateList(par1) {
            console.log('即将设置曲线数据...', par1);
            const action = {
                dateList: par1,
                type: "setDateList",
            };
            dispatch(action);
        }
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(Demo);
